<template>
    <el-dialog v-dialogDrag title="编辑企业" :visible="isShowEditDialog" @close="dialogClose" :close-on-click-modal="false" width="60%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm">
            <el-form-item label="企业名称：" prop="companyName">
                <el-input type="text" v-model="ruleForm.companyName">
                </el-input>
            </el-form-item>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="企业简称：" prop="abbreviated">
                        <el-input type="text" v-model="ruleForm.abbreviated">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="法人：" prop="corporate">
                        <el-input type="text" v-model="ruleForm.corporate">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="办公电话：" prop="phone">
                        <el-input type="text" v-model="ruleForm.phone">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="办公地址：" prop="address">
                        <el-input type="text" v-model="ruleForm.address">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="微信号：" prop="wechat">
                        <el-input type="text" v-model="ruleForm.wechat">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="信用代码：" prop="creditCode">
                        <el-input type="text" v-model="ruleForm.creditCode">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="单位联系人：" prop="contact">
                        <el-input type="text" v-model="ruleForm.contact">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱：" prop="email">
                        <el-input type="text" v-model="ruleForm.email">
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item label="企业级别：" prop="headId">
                        <el-radio v-model="ruleForm.headId" value="0" label="0">总公司</el-radio>
                        <el-radio v-model="ruleForm.headId" value="1" label="1">分公司</el-radio>
                    </el-form-item> -->
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="公众号：" prop="officialAccount">
                        <el-upload class="avatar-uploader" :action='actionAccount' list-type="picture-card"
                            :show-file-list="false" :on-success="accounthandleAvatarSuccess">
                            <img v-if="accountUrl" :src="accountUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公章：" prop="officialSeal">
                        <el-upload class="avatar-uploader" :action='actionSeal' list-type="picture-card"
                            :show-file-list="false" :on-success="sealhandleAvatarSuccess">
                            <img v-if="sealUrl" :src="sealUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="logo：" prop="logo">
                        <el-upload class="avatar-uploader" :action='actionLogo' list-type="picture-card"
                            :show-file-list="false" :on-success="logohandleAvatarSuccess">
                            <img v-if="logoUrl" :src="logoUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                </el-button>
                <el-button @click="dialogClose" class="pull-right">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
    import { updateInformation } from '@/api/systemManage/enterpriseMaage'
    export default {
        name: 'enterpriseEdit',
        data () {
            return {
                ruleForm: {},
                actionAccount: '/api/company/gzhUpload',
                actionLogo: '/api/company/logoUpload',
                actionSeal: '/api/company/officialSealUpload',
                accountUrl: '',
                logoUrl: '',
                sealUrl: '',
                rules: {
                    parentId: [
                        { required: false, message: '请输入父级企业名称', trigger: 'change' }
                    ],
                    companyName: [
                        { required: true, message: '请输入企业名称', trigger: 'change' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'change' }
                    ],
                    abbreviated: [
                        { required: true, message: '请输入企业简称', trigger: 'change' }
                    ],
                    address: [
                        { required: true, message: '请输入公司地址', trigger: 'change' }
                    ],
                    contact: [
                        { required: true, message: '请输入单位联系人姓名', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系电话', trigger: 'change' }
                    ],
                    // creditCode: [
                    //     { required: true, message: '请输入信用代码', trigger: 'change' }
                    // ],
                },

            };
        },
        props: {
            isShowEditDialog: {
                type: Boolean
            },
            record: {
                type: Object
            }
        },
        methods: {
            sealhandleAvatarSuccess (file) {
                this.sealUrl = file.data;
                this.ruleForm.officialSeal = this.sealUrl;
            },
            logohandleAvatarSuccess (file) {
                this.logoUrl = file.data;
                this.ruleForm.logo = this.logoUrl;
            },
            accounthandleAvatarSuccess (file) {
                this.accountUrl = file.data;
                this.ruleForm.officialAccount = this.accountUrl;
            },
            submitForm () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let params = {}

                        updateInformation(Object.assign(params, this.ruleForm)).then((res) => {
                            if (res) {
                                this.$message.success('修改成功！')
                                this.$emit('dialogClose')
                                this.$emit('Ok')
                            }
                        })
                    }
                    else {
                        return
                    }
                });
            },
            dialogClose () {
                this.$emit('dialogClose')
            }
        },
        mounted () {
            this.ruleForm = Object.assign({},this.record);
            this.logoUrl = this.record.logo
            this.sealUrl = this.record.officialSeal
            this.accountUrl = this.record.officialAccount
        }
    }
</script>
<style lang="less" scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
    }

    .avatar {
        width: 146px;
        height: 146px;
        object-fit: contain;
        display: block;
    }
</style>